<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随效果</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>

<body>

    <form action="">
        
    <input type="search" class="a" />
    </form>


<div class="footer">
    <div class="bubbles">
        <div class="bubble"></div>
    </div>
</div>

<svg style="display: none;">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
    </filter>
  </defs>
</svg>


<script>
    const n = 10;
    const bubbles = document.querySelector('.bubbles');
    bubbles.addEventListener('animationend', (e) => {
        e.target.remove();
    })
    function createBubbles(argument) {
        const vw = document.documentElement.clientWidth;
        for ( let i = 0; i < n; i++) {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            const s = Math.random() * 100 + 50;
            const x = Math.random() * (vw - s);
            const d = Math.random() * 2 + 1;
            bubble.style.setProperty('--x', `${x}px`);
            bubble.style.setProperty('--s', `${s}px`);
            bubble.style.setProperty('--d', `${d}s`);
            bubbles.appendChild(bubble);
        }
    }

    createBubbles();
    setInterval(createBubbles, 1000)
</script>

</body>

</html>